3.3.0

- Added commands to open and collapse all admonitions in active note (closes #19 )
- Admonition icons now respect the font size of the admonition title (closes #14 )
- Collapse handle now centers inside the title element
- CSS changes

Author: valentine195

README.md

@@ -121,9 +121,18 @@ This is all of the CSS applied to the admonitions. Override these classes to cus
 Every admonition receives the following CSS classes:
 
 ```css
+:root {
+    --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 0.6rem;
+    padding: 0;
     overflow: hidden;
     color: var(--text-normal);
     page-break-inside: avoid;
@@ -135,30 +144,36 @@ Every admonition receives the following CSS classes:
 
 .admonition-title {
     position: relative;
-    margin: 0 -0.6rem 0 -0.8rem;
-    padding: 0.4rem 0.6rem 0.4rem 2rem;
+    padding: 0.6rem 0.25em;
     font-weight: 700;
-    border-left: 0.2rem solid;
     background-color: rgba(var(--admonition-color), 0.1);
 }
+.admonition-title > * {
+    display: flex;
+    justify-content: flex-start;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+}
 
 .admonition-title-icon {
-    position: absolute;
-    left: 0.6rem;
-    width: 1.25rem;
-    height: 1.25rem;
     color: rgb(var(--admonition-color));
     display: flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
+    margin: 0 0.5em 0 0.25em;
+    min-width: 1em;
 }
 
 .admonition-title.no-title {
     display: none;
 }
 
 .admonition > .admonition-title.no-title + .admonition-content {
-    margin: 1em 0;
+    margin: 1rem 0;
+}
+
+.admonition-content {
+    margin: 0 0.6rem;
 }
 ```
 
@@ -188,7 +203,6 @@ details.admonition > summary {
     list-style: none;
     display: block;
     min-height: 1rem;
-    padding: 0.4rem 1.8rem 0.4rem 2rem;
     border-top-left-radius: 0.1rem;
     border-top-right-radius: 0.1rem;
     cursor: pointer;
@@ -197,24 +211,29 @@ details.admonition > summary::-webkit-details-marker {
     display: none;
 }
 
-details.admonition > summary:after {
+details.admonition > summary > .collapser {
     position: absolute;
-    top: 8px;
+    top: 50%;
     right: 8px;
-    width: 20px;
-    height: 20px;
+    transform: translateY(-50%);
+    content: "";
+}
+
+details.admonition > summary > .collapser > .handle {
+    transform: rotate(0deg);
+    transition: transform 0.25s;
     background-color: currentColor;
-    -webkit-mask-image: var(--admonition-details-icon);
-    mask-image: var(--admonition-details-icon);
     -webkit-mask-repeat: no-repeat;
     mask-repeat: no-repeat;
     -webkit-mask-size: contain;
     mask-size: contain;
-    transform: rotate(0deg);
-    transition: transform 0.25s;
-    content: "";
+    -webkit-mask-image: var(--admonition-details-icon);
+    mask-image: var(--admonition-details-icon);
+    width: 20px;
+    height: 20px;
 }
-details.admonition[open] > summary:after {
+
+details.admonition[open] > summary > .collapser > .handle {
     transform: rotate(90deg);
 }
 ```
@@ -238,6 +257,13 @@ An icon without a title will have this CSS:
 
 # Version History
 
+## 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
+- 
 ## 3.2.0
 
 -   Added a setting to turn on default Obsidian syntax highlighting to admonition code block types

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "obsidian-admonition",
 	"name": "Admonition",
-	"version": "3.2.2",
+	"version": "3.3.0",
 	"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.2.2",
+    "version": "3.3.0",
     "description": "Admonition block-styled content for Obsidian.md",
     "main": "main.js",
     "scripts": {

src/main.css

@@ -10,7 +10,7 @@
 
 .admonition {
     margin: 1.5625em 0;
-    padding: 0 0.6rem;
+    padding: 0;
     overflow: hidden;
     color: var(--text-normal);
     page-break-inside: avoid;
@@ -22,35 +22,36 @@
 
 .admonition-title {
     position: relative;
-    margin: 0 -0.6rem 0 -0.8rem;
-    padding: 0.4rem 0.6rem 0.4rem 2rem;
+    padding: 0.6rem 0.25em;
     font-weight: 700;
-    border-left: 0.2rem solid;
     background-color: rgba(var(--admonition-color), 0.1);
 }
-
-.admonition-title p {
+.admonition-title > * {
+    display: flex;
+    justify-content: flex-start;
     margin-top: 0 !important;
     margin-bottom: 0 !important;
 }
 
 .admonition-title-icon {
-    position: absolute;
-    left: 0.6rem;
-    top: 50%;
-    transform: translateY(-50%);
+    color: rgb(var(--admonition-color));
     display: flex;
+    align-items: center;
     justify-content: center;
-    width: 1.25rem;
-    color: rgb(var(--admonition-color));
+    margin: 0 0.5em 0 0.25em;
+    min-width: 1em;
 }
 
 .admonition-title.no-title {
     display: none;
 }
 
 .admonition > .admonition-title.no-title + .admonition-content {
-    margin: 1em 0;
+    margin: 1rem 0;
+}
+
+.admonition-content {
+    margin: 0 0.6rem;
 }
 
 details.admonition:not([open]) {
@@ -62,7 +63,6 @@ details.admonition > summary {
     list-style: none;
     display: block;
     min-height: 1rem;
-    padding: 0.4rem 1.8rem 0.4rem 2rem;
     border-top-left-radius: 0.1rem;
     border-top-right-radius: 0.1rem;
     cursor: pointer;
@@ -71,24 +71,29 @@ details.admonition > summary::-webkit-details-marker {
     display: none;
 }
 
-details.admonition > summary:after {
+details.admonition > summary > .collapser {
     position: absolute;
-    top: 8px;
+    top: 50%;
     right: 8px;
-    width: 20px;
-    height: 20px;
+    transform: translateY(-50%);
+    content: "";
+}
+
+details.admonition > summary > .collapser > .handle {
+    transform: rotate(0deg);
+    transition: transform 0.25s;
     background-color: currentColor;
-    -webkit-mask-image: var(--admonition-details-icon);
-    mask-image: var(--admonition-details-icon);
     -webkit-mask-repeat: no-repeat;
     mask-repeat: no-repeat;
     -webkit-mask-size: contain;
     mask-size: contain;
-    transform: rotate(0deg);
-    transition: transform 0.25s;
-    content: "";
+    -webkit-mask-image: var(--admonition-details-icon);
+    mask-image: var(--admonition-details-icon);
+    width: 20px;
+    height: 20px;
 }
-details.admonition[open] > summary:after {
+
+details.admonition[open] > summary > .collapser > .handle {
     transform: rotate(90deg);
 }
 

src/main.ts

@@ -2,6 +2,7 @@ import {
     MarkdownPostProcessorContext,
     MarkdownRenderChild,
     MarkdownRenderer,
+    MarkdownView,
     Notice,
     Plugin
 } from "obsidian";
@@ -176,6 +177,39 @@ export default class ObsidianAdmonition
         if (this.syntaxHighlight) {
             this.turnOnSyntaxHighlighting();
         }
+
+        this.addCommand({
+            id: "collapse-admonitions",
+            name: "Collapse Admonitions in Note",
+            callback: () => {
+                let view = this.app.workspace.getActiveViewOfType(MarkdownView);
+                if (!view || !(view instanceof MarkdownView)) return;
+
+                let admonitions = view.contentEl.querySelectorAll(
+                    "details[open]"
+                );
+                for (let i = 0; i < admonitions.length; i++) {
+                    let admonition = admonitions[i];
+                    admonition.removeAttribute("open");
+                }
+            }
+        });
+        this.addCommand({
+            id: "open-admonitions",
+            name: "Open Admonitions in Note",
+            callback: () => {
+                let view = this.app.workspace.getActiveViewOfType(MarkdownView);
+                if (!view || !(view instanceof MarkdownView)) return;
+
+                let admonitions = view.contentEl.querySelectorAll(
+                    "details:not([open])"
+                );
+                for (let i = 0; i < admonitions.length; i++) {
+                    let admonition = admonitions[i];
+                    admonition.setAttribute("open", "open");
+                }
+            }
+        });
     }
     turnOnSyntaxHighlighting(types: string[] = Object.keys(this.admonitions)) {
         if (!this.syntaxHighlight) return;
@@ -403,18 +437,23 @@ export default class ObsidianAdmonition
             });
         }
 
-        titleEl.createDiv({
-            cls: `admonition-title-icon`
-        }).innerHTML = icon(
-            findIconDefinition({
-                iconName: this.admonitions[type].icon
-            })
-        ).html[0];
-
-        let titleContentEl = createDiv();
+        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]);
 
-        titleEl.appendChild(titleContentEl);
+        if (collapse) {
+            titleEl.createDiv("collapser").createDiv("handle");
+        }
         return admonition;
     }
     async onunload() {

src/settings.ts

@@ -276,10 +276,7 @@ class SettingsModal extends Modal {
                 el.value = rgbToHex(this.color);
                 el.oninput = ({ target }) => {
                     let color = hexToRgb((target as HTMLInputElement).value);
-                    console.log(
-                        "🚀 ~ file: settings.ts ~ line 118 ~ SettingsModal ~ display ~ color",
-                        color
-                    );
+                    
                     if (!color) return;
                     this.color = `${color.r}, ${color.g}, ${color.b}`;
                     previewEl.setAttribute(
@@ -397,10 +394,7 @@ class SettingsModal extends Modal {
 
 function hexToRgb(hex: string) {
     let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    console.log(
-        "🚀 ~ file: settings.ts ~ line 156 ~ hexToRgb ~ result",
-        result
-    );
+    
     return result
         ? {
               r: parseInt(result[1], 16),

versions.json

@@ -1,7 +1,8 @@
 {
-	"0.2.3": "0.11.0",
+    "0.2.3": "0.11.0",
     "1.0.1": "0.11.0",
     "2.0.1": "0.11.0",
     "3.1.2": "0.11.0",
-    "3.2.2": "0.11.0"
-}
+    "3.2.2": "0.11.0",
+    "3.3.0": "0.11.0"
+}