3.3.3

- Fixed issue where admonition titles were being stripped of spaces around markdown rendered elements (closes #22) - Fixed errors and formatting issues related to rendering an admonition without a title
javalent · Apr 30, 2021 · 2313887 · 2313887
1 parent 6834d47
commit 2313887
Show file tree

Hide file tree

Showing 8 changed files with 160 additions and 109 deletions.
diff --git a/README.md b/README.md
@@ -125,11 +125,6 @@ Every admonition receives the following CSS classes:
     --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 {
-    color: yellow;
-    margin-right: 8px;
-}
-
 .admonition {
     margin: 1.5625em 0;
     padding: 0;
@@ -148,7 +143,8 @@ Every admonition receives the following CSS classes:
     font-weight: 700;
     background-color: rgba(var(--admonition-color), 0.1);
 }
-.admonition-title > * {
+
+.admonition-title-content {
     display: flex;
     justify-content: flex-start;
     margin-top: 0 !important;
@@ -164,12 +160,17 @@ Every admonition receives the following CSS classes:
     min-width: 1em;
 }
 
+.admonition-title-markdown {
+    display: block;
+}
+
 .admonition-title.no-title {
     display: none;
 }
 
 .admonition > .admonition-title.no-title + .admonition-content {
-    margin: 1rem 0;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
 }
 
 .admonition-content {
@@ -198,6 +199,7 @@ details.admonition:not([open]) {
     padding-bottom: 0;
     box-shadow: none;
 }
+
 details.admonition > summary {
     outline: none;
     list-style: none;
@@ -207,6 +209,7 @@ details.admonition > summary {
     border-top-right-radius: 0.1rem;
     cursor: pointer;
 }
+
 details.admonition > summary::-webkit-details-marker {
     display: none;
 }
@@ -259,11 +262,12 @@ An icon without a title will have this CSS:
 
 ## 3.3.0
 
-- Added commands to open and collapse all admonitions in active note
-- Admonition icons now respect the font size of the admonition title
-- Collapse handle now centers inside the title element
-- CSS changes
-- 
+-   Added commands to open and collapse all admonitions in active note
+-   Admonition icons now respect the font size of the admonition title
+-   Collapse handle now centers inside the title element
+-   CSS changes
+-
+
 ## 3.2.0
 
 -   Added a setting to turn on default Obsidian syntax highlighting to admonition code block types

diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
 	"id": "obsidian-admonition",
 	"name": "Admonition",
-	"version": "3.3.2",
+	"version": "3.3.3",
 	"minAppVersion": "0.11.0",
 	"description": "Admonition block-styled content for Obsidian.md",
 	"author": "Jeremy Valentine",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "obsidian-admonition",
-    "version": "3.3.2",
+    "version": "3.3.3",
     "description": "Admonition block-styled content for Obsidian.md",
     "main": "main.js",
     "scripts": {

diff --git a/src/main.css b/src/main.css
@@ -3,16 +3,6 @@
     --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 {
-    color: yellow;
-    margin-right: 8px;
-}
-
-.setting-item>.admonition {
-    width: 50%;
-    margin: 0;
-}
-
 .admonition {
     margin: 1.5625em 0;
     padding: 0;
@@ -32,7 +22,7 @@
     background-color: rgba(var(--admonition-color), 0.1);
 }
 
-.admonition-title>* {
+.admonition-title-content {
     display: flex;
     justify-content: flex-start;
     margin-top: 0 !important;
@@ -48,12 +38,17 @@
     min-width: 1em;
 }
 
+.admonition-title-markdown {
+    display: block;
+}
+
 .admonition-title.no-title {
     display: none;
 }
 
-.admonition>.admonition-title.no-title+.admonition-content {
-    margin: 1rem 0;
+.admonition > .admonition-title.no-title + .admonition-content {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
 }
 
 .admonition-content {
@@ -65,7 +60,7 @@ details.admonition:not([open]) {
     box-shadow: none;
 }
 
-details.admonition>summary {
+details.admonition > summary {
     outline: none;
     list-style: none;
     display: block;
@@ -75,19 +70,19 @@ details.admonition>summary {
     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;
@@ -101,11 +96,20 @@ details.admonition>summary>.collapser>.handle {
     height: 20px;
 }
 
-details.admonition[open]>summary>.collapser>.handle {
+details.admonition[open] > summary > .collapser > .handle {
     transform: rotate(90deg);
 }
 
-/** Invalid Setting */
+/** Settings */
+.use-csv-marker > svg {
+    color: yellow;
+    margin-right: 8px;
+}
+
+.setting-item > .admonition {
+    width: 50%;
+    margin: 0;
+}
 
 .unset-align-items {
     align-items: unset;
@@ -134,4 +138,4 @@ input.is-invalid {
 
 .admonition li.task-list-item.is-checked p {
     text-decoration: line-through;
-}
+}
diff --git a/src/main.ts b/src/main.ts
@@ -7,7 +7,7 @@ import {
     Plugin
 } from "obsidian";
 import { Admonition, ObsidianAdmonitionPlugin } from "../@types/types";
-import { getAdmonitionElement } from './util';
+import { getAdmonitionElement } from "./util";
 
 import * as CodeMirror from "./codemirror";
 
@@ -250,7 +250,7 @@ export default class ObsidianAdmonition
             cm.setOption("mode", cm.getOption("mode"))
         );
     }
-    postprocessor(
+    async postprocessor(
         type: string,
         src: string,
         el: HTMLElement,
@@ -267,11 +267,12 @@ export default class ObsidianAdmonition
                 src.match(/^\b(title|collapse)\b:([\s\S]*?)$/gm) || [];
 
             let params = Object.fromEntries(
-                matchedParameters.map((p) =>
-                    {
-                        let [, param, rest] = p.match(/^\b(title|collapse)\b:([\s\S]*?)$/)
-                        return [ param.trim(), rest.trim()]}
-                )
+                matchedParameters.map((p) => {
+                    let [, param, rest] = p.match(
+                        /^\b(title|collapse)\b:([\s\S]*?)$/
+                    );
+                    return [param.trim(), rest.trim()];
+                })
             );
 
             let {
@@ -283,12 +284,9 @@ export default class ObsidianAdmonition
              * Get the content. Content should be everything that is not the title or collapse parameters.
              * Remove any "content: " fields (legacy from < v0.2.0)
              */
-            let content = src.replace(
-                /^\b(title|collapse)\b:([\s\S]*?)$/gm,
-                ""
-            );
-            content = content.replace(/^\bcontent\b:\s?/gm, "");
-
+            let content = src
+                .replace(/^\b(title|collapse)\b:([\s\S]*?)$/gm, "")
+                .replace(/^\bcontent\b:\s?/gm, "");
             /**
              * If the admonition should collapse, but something other than open or closed was provided, set to closed.
              */
@@ -319,7 +317,7 @@ export default class ObsidianAdmonition
              * Collapsible -> <details> <summary> Title </summary> <div> Content </div> </details>
              * Regular -> <div> <div> Title </div> <div> Content </div> </div>
              */
-            let admonitionElement = getAdmonitionElement(
+            let admonitionElement = await getAdmonitionElement(
                 type,
                 title,
                 this.admonitions[type].icon,

diff --git a/src/settings.ts b/src/settings.ts
@@ -90,7 +90,7 @@ export default class AdmonitionSetting extends PluginSettingTab {
 
 			let setting = new Setting(containerEl);
 
-			let admonitionElement = getAdmonitionElement(
+			let admonitionElement = await getAdmonitionElement(
 				admonition.type,
 				admonition.type[0].toUpperCase() + admonition.type.slice(1).toLowerCase(),
 				admonition.icon,
@@ -153,7 +153,7 @@ class SettingsModal extends Modal {
 
 		const settingDiv = contentEl.createDiv();
 
-		let admonitionPreview = getAdmonitionElement(
+		let admonitionPreview = await getAdmonitionElement(
 			this.type,
 			this.type.length
 				? this.type[0].toUpperCase() + this.type.slice(1).toLowerCase()