3.3.1

- Fixed admonition display issues in settings tabs (ref #20 )
- Fixed issue where admonition color picker value was not being set correctly in settings tab
- Fixed issue where a title could not have colons (closes #20 )

@types/types.ts

@@ -24,9 +24,4 @@ export declare class ObsidianAdmonitionPlugin extends Plugin_2 {
         el: HTMLElement,
         ctx: MarkdownPostProcessorContext
     ) => void;
-    getAdmonitionElement: (
-        type: string,
-        title: string,
-        collapse?: string
-    ) => HTMLElement;
 }

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "obsidian-admonition",
 	"name": "Admonition",
-	"version": "3.3.0",
+	"version": "3.3.1",
 	"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": "3.3.0",
+    "version": "3.3.1",
     "description": "Admonition block-styled content for Obsidian.md",
     "main": "main.js",
     "scripts": {
@@ -11,6 +11,7 @@
     "author": "Jeremy Valentine",
     "license": "MIT",
     "devDependencies": {
+        "@fortawesome/fontawesome-svg-core": "^1.2.35",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@rollup/plugin-commonjs": "^15.1.0",
         "@rollup/plugin-node-resolve": "^9.0.0",
@@ -23,8 +24,5 @@
         "rollup-plugin-css-only": "^3.1.0",
         "tslib": "^2.0.3",
         "typescript": "^4.0.3"
-    },
-    "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^1.2.35"
     }
 }

src/main.css

@@ -3,11 +3,16 @@
     --admonition-details-icon: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59 16.58L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.42z'/></svg>");
 }
 
-.use-csv-marker > svg {
+.use-csv-marker>svg {
     color: yellow;
     margin-right: 8px;
 }
 
+.setting-item>.admonition {
+    width: 50%;
+    margin: 0;
+}
+
 .admonition {
     margin: 1.5625em 0;
     padding: 0;
@@ -26,7 +31,8 @@
     font-weight: 700;
     background-color: rgba(var(--admonition-color), 0.1);
 }
-.admonition-title > * {
+
+.admonition-title>* {
     display: flex;
     justify-content: flex-start;
     margin-top: 0 !important;
@@ -46,7 +52,7 @@
     display: none;
 }
 
-.admonition > .admonition-title.no-title + .admonition-content {
+.admonition>.admonition-title.no-title+.admonition-content {
     margin: 1rem 0;
 }
 
@@ -58,7 +64,8 @@ details.admonition:not([open]) {
     padding-bottom: 0;
     box-shadow: none;
 }
-details.admonition > summary {
+
+details.admonition>summary {
     outline: none;
     list-style: none;
     display: block;
@@ -67,19 +74,20 @@ details.admonition > summary {
     border-top-right-radius: 0.1rem;
     cursor: pointer;
 }
-details.admonition > summary::-webkit-details-marker {
+
+details.admonition>summary::-webkit-details-marker {
     display: none;
 }
 
-details.admonition > summary > .collapser {
+details.admonition>summary>.collapser {
     position: absolute;
     top: 50%;
     right: 8px;
     transform: translateY(-50%);
     content: "";
 }
 
-details.admonition > summary > .collapser > .handle {
+details.admonition>summary>.collapser>.handle {
     transform: rotate(0deg);
     transition: transform 0.25s;
     background-color: currentColor;
@@ -93,7 +101,7 @@ details.admonition > summary > .collapser > .handle {
     height: 20px;
 }
 
-details.admonition[open] > summary > .collapser > .handle {
+details.admonition[open]>summary>.collapser>.handle {
     transform: rotate(90deg);
 }
 
@@ -126,4 +134,4 @@ input.is-invalid {
 
 .admonition li.task-list-item.is-checked p {
     text-decoration: line-through;
-}
+}

src/main.ts

@@ -7,7 +7,7 @@ import {
     Plugin
 } from "obsidian";
 import { Admonition, ObsidianAdmonitionPlugin } from "../@types/types";
-import { findIconDefinition, icon } from "./icons";
+import { getAdmonitionElement } from './util';
 
 import * as CodeMirror from "./codemirror";
 
@@ -268,7 +268,9 @@ export default class ObsidianAdmonition
 
             let params = Object.fromEntries(
                 matchedParameters.map((p) =>
-                    p.split(/:\s?/).map((s) => s.trim())
+                    {
+                        let [, param, rest] = p.match(/^\b(title|collapse)\b:([\s\S]*?)$/)
+                        return [ param.trim(), rest.trim()]}
                 )
             );
 
@@ -317,9 +319,11 @@ export default class ObsidianAdmonition
              * Collapsible -> <details> <summary> Title </summary> <div> Content </div> </details>
              * Regular -> <div> <div> Title </div> <div> Content </div> </div>
              */
-            let admonitionElement = this.getAdmonitionElement(
+            let admonitionElement = getAdmonitionElement(
                 type,
                 title,
+                this.admonitions[type].icon,
+                this.admonitions[type].color,
                 collapse
             );
 
@@ -402,60 +406,6 @@ export default class ObsidianAdmonition
             el.replaceWith(pre);
         }
     }
-    getAdmonitionElement(
-        type: string,
-        title: string,
-        collapse?: string
-    ): HTMLElement {
-        let admonition,
-            titleEl,
-            attrs: { style: string; open?: string } = {
-                style: `--admonition-color: ${this.admonitions[type].color};`
-            };
-        if (collapse) {
-            if (collapse === "open") {
-                attrs.open = "open";
-            }
-            admonition = createEl("details", {
-                cls: `admonition admonition-${type}`,
-                attr: attrs
-            });
-            titleEl = admonition.createEl("summary", {
-                cls: `admonition-title ${
-                    !title.trim().length ? "no-title" : ""
-                }`
-            });
-        } else {
-            admonition = createDiv({
-                cls: `admonition admonition-${type}`,
-                attr: attrs
-            });
-            titleEl = admonition.createDiv({
-                cls: `admonition-title ${
-                    !title.trim().length ? "no-title" : ""
-                }`
-            });
-        }
-
-        let titleContentEl = createDiv("title-content");
-        MarkdownRenderer.renderMarkdown(title, titleContentEl, "", null);
-
-        const iconEl = createDiv("admonition-title-icon");
-        iconEl.appendChild(
-            icon(
-                findIconDefinition({
-                    iconName: this.admonitions[type].icon
-                })
-            ).node[0]
-        );
-        titleContentEl.children[0].prepend(iconEl);
-        titleEl.appendChild(titleContentEl.children[0]);
-
-        if (collapse) {
-            titleEl.createDiv("collapser").createDiv("handle");
-        }
-        return admonition;
-    }
     async onunload() {
         console.log("Obsidian Admonition unloaded");